<template>
  <div>
    <router-view v-if="isMounted" />

    <button>
      <router-link to="/about">About</router-link>
    </button>
    <button>
      <router-link to="/contact">Contact</router-link>
    </button>

    <p>Counter: {{ counter.count }}</p>
    <button @click="counter.increment()">Increment</button>
    <img
      style="width: 100px; height: auto"
      src="./assets/logo.jpeg"
      alt="Vue logo"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useCounterStore } from "./store/count";
const counter = useCounterStore();

const isMounted = ref(false);
onMounted(() => {
  isMounted.value = true;
});
</script>
